<!-- subpkg_consult/payment/index.vue -->
<script lang="ts" setup>
import { createOrderApi, orderPayApi, preOrderApi } from '@/apis/consult';
import { patientDetailApi } from '@/apis/patient';
import { useConsultStore } from '@/store/consult';
import type { OrderPreData } from '@/types/consult';
import type { PatientParams } from '@/types/patient';
import { ref } from 'vue';
import customPayment from '@/components/custom-payment/custom-payment.vue';

const store = useConsultStore()


// 1. 获取预支付订单信息
const preOrder = ref<OrderPreData>({} as OrderPreData)
const getPreOrder = async ()=> {
  const res = await preOrderApi({type: store.type, illnessType: store.illnessType})
  preOrder.value = res
}
getPreOrder()

// 2. 获取患者详情
const patientDetail = ref<PatientParams>({} as PatientParams)
const getPatientDetail = async ()=>{
  const res = await patientDetailApi(store.patientId)
  patientDetail.value = res
  // console.log(patientDetail.value)
}
getPatientDetail()

// 3. 生成订单
// 订单ID
const orderId = ref('')
const paymentRef = ref()
const onPaymentButtonClick = async ()=>{
  // 1. 如果有订单id, 则不能重复生成
  if(orderId.value !== ''){
    return uni.showToast({title: '订单已经存在, 不能重复生成', icon: 'none'})
  }

  // 2. 调用生成订单接口
  const {type, illnessType, depId, patientId, illnessInfo} = store
  const res = await createOrderApi({
    type,
    illnessType,
    depId,
    patientId,
    illnessDesc: illnessInfo.illnessDesc,
    illnessTime: illnessInfo.illnessTime,
    consultFlag: illnessInfo.consultFlag,
    pictures: illnessInfo.pictures
  })
  orderId.value = res.id

  // 3. 清空之前收集的数据
  store.clear()

  // 4. 打开支付弹层
  paymentRef.value.open()
}

const onClosePayment = async ()=>{
  const res = await uni.showModal({
    title: '关闭支付',
    content: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
    cancelText: '仍要关闭',
    cancelColor: '#848484',
    confirmText: '继续支付',
    confirmColor: '#16C2A3',
  })
  if(res.cancel){
   // 关闭弹层
    paymentRef.value.close()
   // 跳转到个人中心
    uni.reLaunch({
      url: '/pages/my/index',
    })
  }
  
}

const onComfirmPayment = async (index: number)=>{
  if(index === 0) return uni.showToast({title: '暂不支持微信支付', icon: 'none'})
  // 获取跳转支付的连接
  const res = await orderPayApi({
    paymentMethod: index,
    orderId: orderId.value,
    payCallback: 'http://localhost:5173/#/subpkg_consult/room/index',
  })
  // 跳转支付
  // 通过js的方式完成页面链接跳转
  window.location.href = res.payUrl
}

</script>

<template>
  <scroll-page v-if="preOrder.payment">
    <view class="payment-page">
      <uni-section title-font-size="32rpx" title-color="#121826" padding="30rpx" :title="`图文问诊 ${preOrder.payment}元`">
        <uni-list :border="false">
          <uni-list-item title="极速问诊" note="自动分配医生" thumb="/static/uploads/doctor-avatar.jpg" thumb-size="lg" />
          <uni-list-item title="优惠券" show-arrow :right-text="`-¥${preOrder.couponDeduction}.00`" />
          <uni-list-item title="积分抵扣">
            <template #footer>
              <view class="uni-list-text-red">-¥{{ preOrder.pointDeduction }}.00</view>
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red">¥{{ preOrder.actualPayment }}.00</view>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>

      <view class="dividing-line"></view>

      <uni-section title-font-size="32rpx" title-color="#121826" padding="30rpx" title="患者资料">
        <uni-list :border="false">
          <uni-list-item title="患者信息">
            <template #footer>
              <view class="uni-list-text-gray"> {{ patientDetail.name }} | {{ patientDetail.genderValue }} | {{
                patientDetail.age }}岁 </view>
            </template>
          </uni-list-item>
          <uni-list-item border title="病情描述" :note="store.illnessInfo.illnessDesc" />
        </uni-list>
      </uni-section>

      <!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <view class="total-amount">
        合计: <text class="number">¥{{ preOrder.actualPayment }}.00</text>
      </view>
      <button class="uni-button" @click="onPaymentButtonClick">立即支付</button>
    </view>
    <!-- 支付弹层 -->
    <custom-payment ref="paymentRef" :amount="preOrder.actualPayment" :order-id="orderId" @close="onClosePayment" @confirm="onComfirmPayment"/>
  </scroll-page>
</template>

<style lang="scss">
@import './index.scss';
</style>